<template>
	<div class="draining_coupons">
        <div class="selIndex0" v-if="selIndex===0">
    		<x-header title="闲时引流券" class="blues" :left-options="{backText: ''}">
    			<a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
    		</x-header>
    		<div class="content">
                <div class="face_value">
                    <h6>面值</h6>
                    <div class="change1">
                        <p :class="{disabled1:input1<=0}" @click="reduce1">-</p>
                        <div class="change_price">
                            <input type="number" v-model.trim="input1">
                            <p>元</p>
                        </div>
                        <p @click="plus1">+</p>
                    </div>
                </div>
                <div class="face_value">
                    <h6>团购价</h6>
                    <div class="change1">
                        <p :class="{disabled1:input2<=0}" @click="reduce2">-</p>
                        <div class="change_price">
                            <input type="number" v-model.trim="input2">
                            <p>元</p>
                        </div>
                        <p @click="plus2">+</p>
                    </div>
                </div>
                <div class="additional_info" v-if="showInfo1">
                    <p>美团、点评同时售卖，此为单个平台的售卖数量</p>
                    <div @click="showInfo1=false">×</div>
                </div>
                <div class="face_value">
                    <h6>每天最多卖</h6>
                    <div class="change1">
                        <p :class="{disabled1:input3<=0}" @click="reduce3">-</p>
                        <div class="change_price">
                            <input type="number" v-model.trim="input3">
                            <p>张</p>
                        </div>
                        <p @click="plus3">+</p>
                    </div>
                </div>
                <div class="face_value">
                    <h6>每人最多买</h6>
                    <div class="change1">
                        <p :class="{disabled1:input4<=0}" @click="reduce4">-</p>
                        <div class="change_price">
                            <input type="number" v-model.trim="input4">
                            <p>张</p>
                        </div>
                        <p @click="plus4">+</p>
                    </div>
                </div>
                <div class="additional_info" v-if="showInfo2">
                    <p>美团、点评同时售卖，此为单个平台的库存量</p>
                    <div @click="showInfo2=false">×</div>
                </div>
                <div class="face_value">
                    <h6>总库存</h6>
                    <div class="change1">
                        <p :class="{disabled1:input5<=0}" @click="reduce5">-</p>
                        <div class="change_price">
                            <input type="number" v-model.trim="input5">
                            <p>张</p>
                        </div>
                        <p @click="plus5">+</p>
                    </div>
                </div>
                <div class="consume_time">
                    <group>
                        <cell @click.native="goConsumeTime" title="消费时间" :value="value1" is-link></cell>
                        <cell style="border-top:.3rem solid #f0f0f0;" @click.native="goAccounts" title="收款账户" :value="value2" is-link value-align="right"></cell>
                        <cell @click.native="goStores" title="门店" :value="value3" is-link value-align="right"></cell>
                    </group>
                </div>
            </div>
            <footer>
                <button>保存并预览</button>
                <button>提交审核</button>
            </footer>
        </div>  

        <!-- 消费时间 -->
        <div class="selIndex5" v-if="selIndex===5">
            <div class="consume_time">
                <x-header title="消费时间" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="check_list">
                        <checklist :options="commonList5_1" v-model="radioValue5_1" :max="1"></checklist>
                    </div>
                    <div v-if="radioValue5_1[0]==='部分时间可用'" class="date_times">
                        <div class="date_time" v-for="(item,index) in allData5_1" :key="index">
                            <img v-if="index===0" style="visibility:hidden;" src="../../assets/images/groups/del.jpg" alt="" />
                            <img v-if="index>0" @click="dels5_1" src="../../assets/images/groups/del.jpg" alt="" />
                            <datetime v-model="value5_1" format="HH:mm"></datetime>
                            <p>至</p>
                            <datetime v-model="value5_2" format="HH:mm"></datetime>
                        </div>
                        <div class="adds" @click="adds5_1">
                            <img src="../../assets/images/groups/add.jpg" alt="" />
                            <p>添加</p>
                        </div>
                        <div class="errors" v-if="isError5_1">
                            <img src="../../assets/images/groups/error.jpg" alt="" />
                            <p>可用时间有重叠，请仔细检查</p>
                        </div>
                    </div>
                    <button @click="goRelease5_1">保存</button>
                </div>
            </div>
        </div>   

        <!-- 收款账户 -->
        <div class="selIndex2" v-if="selIndex===2">
            <div class="accounts">
                <x-header title="选择账户" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <div class="account_tab">
                        <tab>
                            <tab-item :selected="selectIndex2_1===0" @on-item-click="onItemClick2_1">可用账户</tab-item>
                            <tab-item :selected="selectIndex2_1===1" @on-item-click="onItemClick2_1">不可用账户</tab-item>                 
                        </tab>
                    </div>
                    <div class="content1" v-if="selectIndex2_1===0">
                        <div class="data_list">
                            <div class="names">
                                <p>广客缘三及第</p>
                                <check-icon :value.sync="demo2_1"></check-icon>
                            </div>  
                            <h6>sjDDCY0592058048</h6>
                            <div class="bank_name name1">
                                <p>开户行：</p>
                                <p>中国农业银行&nbsp;中国农业银行深圳天安支行</p>
                            </div>
                            <div class="user_name name1">
                                <p>开户名：</p>
                                <p>李广元</p>
                            </div>
                            <div class="bank_card name1">
                                <p>银行卡：</p>
                                <p>{{ account_num | filters2_1 }}</p>
                            </div>
                            <div class="pay_way name1">
                                <p>付款方式：</p>
                                <p>7天自提+每4周自动付</p>
                            </div>
                        </div>              
                        <button @click="goRelease2_1">完成</button>
                    </div>
                    <div class="content2" v-if="selectIndex2_1===1">
                        <div class="no_data">暂无数据</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 门店 -->
        <div class="selIndex3" v-if="selIndex===3">
            <div class="stores">
                <x-header title="选择门店" class="blues" :left-options="{backText: '',preventGoBack:true}" @on-click-back="selIndex=0">
                    <a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
                </x-header>
                <div class="content">
                    <h6>选择门店</h6>
                    <div class="data_lists">
                        <check-icon :value.sync="demo3_1"></check-icon>
                        <div class="store_info">
                            <h6>{{ storeName }}</h6>
                            <p>地址：福田区泰然四路205栋东边</p>
                        </div>
                    </div>
                    <div class="no_more">没有更多了...</div>
                    <button @click="goRelease3_1">完成</button>
                </div>
            </div>
        </div>

	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Group, XNumber, Cell, Checklist, Datetime, CheckIcon } from 'vux';
	export default {
		name: 'draining_coupons',
		data() {
			return {
                selIndex: 0,
                input1: 100, //面值
                input2: 50, //团购价
                input3: 50, //每天最多卖
                input4: 50, //每人最多买
                showInfo1: true,
                showInfo2: true,
                input5: 100, //总库存
                value1: '', //消费时间
                value2: '', //收款账户
                value3: '', //门店
                commonList5_1: ['24小时可用', '部分时间可用'],
                radioValue5_1: ['24小时可用'],
                allData5_1: [1],
                value5_1: '09:00',
                value5_2: '21:00',
                isError5_1: false,
                selectIndex2_1: 0, //0-可用账户  1-不可用账户
                demo2_1: false,         
                account_num: '6217005825846254862', //银行卡
                demo3_1: false,
                storeName: '广客缘客家三及第',
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
            Group,
            XNumber,
            Cell,
            Checklist,
            Datetime,
            CheckIcon
		},
		computed: {

		},
        watch: {
		   input1:{
		       handler(val){
		           //最大值
		           if(val >= 9999){
		               this.input1 = 9999;
                   }
                   //去除开头的0
                   if(this.input1>0 && /^0+/.test(this.input1)){
                       this.input1 = this.input1.replace(/(^0+)/,'')
                   }
                   if(!this.input1 || this.input1<=0){
                       this.input1 = 0;
                   }
               },
               deep: true
           },
            input2:{
                handler(val){
                    //最大值
                    if(val >= 9999){
                        this.input2 = 9999;
                    }
                    //去除开头的0
                    if(this.input2>0 && /^0+/.test(this.input2)){
                        this.input2 = this.input2.replace(/(^0+)/,'')
                    }
                    if(!this.input2 || this.input2<=0){
                        this.input2 = 0;
                    }
                },
                deep: true
            },
            input3:{
                handler(val){
                    //最大值
                    if(val >= 9999){
                        this.input3 = 9999;
                    }
                    //去除开头的0
                    if(this.input3>0 && /^0+/.test(this.input3)){
                        this.input3 = this.input3.replace(/(^0+)/,'')
                    }
                    if(!this.input3 || this.input3<=0){
                        this.input3 = 0;
                    }
                },
                deep: true
            },
            input4:{
                handler(val){
                    //最大值
                    if(val >= 9999){
                        this.input4 = 9999;
                    }
                    //去除开头的0
                    if(this.input4>0 && /^0+/.test(this.input4)){
                        this.input4 = this.input4.replace(/(^0+)/,'')
                    }
                    if(!this.input4 || this.input4<=0){
                        this.input4 = 0;
                    }
                },
                deep: true
            },
            input5:{
                handler(val){
                    //最大值
                    if(val >= 9999){
                        this.input5 = 9999;
                    }
                    //去除开头的0
                    if(this.input5>0 && /^0+/.test(this.input5)){
                        this.input5 = this.input5.replace(/(^0+)/,'')
                    }
                    if(!this.input5 || this.input5<=0){
                        this.input5 = 0;
                    }
                },
                deep: true
            },
        },
		created() {
            
		},
		methods: {
			//帮助中心
            goHelp() {
                let self = this;
                this.$vux.confirm.show({
                    content: '前往帮助中心，是否确定退出?',
                    confirmText: '退出',
                    onConfirm() {
                        this.$router.push('/customerService');
                    }
                })              
            },
            //减
            reduce1(){
                this.input1--;
            },
            //加
            plus1(){
                this.input1++;
            },
            reduce2(){
                this.input2--;
            },
            plus2(){
                this.input2++;
            },
            reduce3(){
                this.input3--;
            },
            plus3(){
                this.input3++;
            },
            reduce4(){
                this.input4--;
            },
            plus4(){
                this.input4++;
            },
            reduce5(){
                this.input5--;
            },
            plus5(){
                this.input5++;
            },
            //消费时间
            goConsumeTime(){			    
                this.selIndex = 5;
            },
            dels5_1() {
                this.allData5_1.pop();
            },
            adds5_1() {
                this.allData5_1.push(1);
            },
            //消费时间保存
            goRelease5_1(){
                this.value1 = this.radioValue5_1[0];
                if(this.radioValue5_1[0] === '部分时间可用'){
                    this.value1 = this.value5_1 + '-' + this.value5_2;
                }               
                this.selIndex = 0;
            },
            //收款账户
            goAccounts() {
                this.selIndex = 2;
            },
            //门店
            goStores() {
                this.selIndex = 3;
            },
            //切换
            onItemClick2_1(val) {
                this.selectIndex2_1 = val;
            },      
            //选择账户完成    
            goRelease2_1(){
                if(!this.demo2_1){
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请选择账户'
                    })
                    return false;
                }
                this.value2 = this.account_num;
                this.selIndex = 0;
            },
            //门店完成
            goRelease3_1(){
                if(!this.demo3_1){
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请选择门店'
                    });
                    return false;
                }
                this.value3 = this.storeName;
                this.selIndex = 0;
            },
		},
        filters: {
            //过滤银行卡
            filters2_1(val){
                let reg1 = /(\d{6})\d{9}(\d{4})/;
                return val.replace(reg1,'$1*********$2');
            }
        }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.draining_coupons {
        .selIndex0{
    		.content {
                background: #fff;
                .face_value{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: .18rem .28rem .18rem 0;
                    margin-left: .28rem;
                    border-bottom:1px solid #e7e7e7;
                    h6{
                        font-size: .3rem;
                        color: #282828;
                        font-weight: 400;
                    }
                    .change1{
                        display: flex;
                        height: .66rem;
                        >p{
                            width: .66rem;
                            border: 1px solid #d3d3d3;
                            font-size: .4rem;
                            color: #a8a8a8;
                            line-height: .66rem;
                        }
                        .change_price{
                            width: 1.28rem;
                            height: .66rem;
                            position: relative;
                            display: flex;
                            align-items: center;
                            border-top: 1px solid #d3d3d3;
                            border-bottom: 1px solid #d3d3d3;
                            input{
                                border: none;
                                width: .88rem;
                                height: .66rem;
                                border-radius: 0;
                                font-size: .3rem;
                                border-top: 1px solid #d3d3d3;
                                border-bottom: 1px solid #d3d3d3;
                                color: #393939;
                                text-align: right;
                                padding-right: .1rem;
                            }
                            p{
                                font-size: .28rem;
                                color: #393939;
                                position: absolute;
                                right: .16rem;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                        }
                        .disabled1{
                            color: #e7e7e7;
                        }
                    }
                }
                .additional_info{
                    height: .65rem;
                    background: #fff7e5;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 .3rem;
                    border-bottom: 1px solid #ffce6c;
                    p{
                        font-size: .26rem;
                        color: #58595a;
                    }
                    div{
                        width: .4rem;
                        height: .4rem;
                        line-height: .4rem;
                    }
                }
            }
            footer{
                width: 7.5rem;
                height: 1.72rem;
                background: #fff;
                z-index: 99;
                position: fixed;
                bottom: 0;
                left: 0;
                display: flex;
                justify-content: space-around;
                align-items: flex-end;
                padding-bottom: .24rem;
                box-shadow: 0 -2px 0 0 #eee;
                -webkit-box-shadow: 0 -2px 0 0 #eee;
                button{
                    border: none;
                    width: 3.34rem;
                    height: .72rem;
                    line-height: .72rem;
                    border-radius: .05rem;
                    font-size: .32rem;
                    color: #fff;
                }
                button:nth-of-type(1){
                    background: #ff9d3c;
                }
                button:nth-of-type(2){
                    background: #3dc6b6;
                }
            }
        }
        .selIndex5{
            .consume_time {
                .content {
                    background: #fff;
                    .check_list {
                        text-align: left;
                        border-bottom: 1px solid #D9D9D9;
                    }
                    .date_time {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-bottom: 1px solid #D9D9D9;
                        padding: .14rem 0;
                        a{
                            text-decoration: none!important;
                        }
                        img {
                            width: .41rem;
                            height: .4rem;
                        }
                    }
                    .adds {
                        display: flex;
                        align-items: center;
                        padding: .18rem .64rem;
                        img {
                            width: .41rem;
                            height: .41rem;
                            margin-right: .34rem;
                        }
                        p{
                            font-size: .3rem;
                            color: #14baa6;
                        }
                    }
                    .errors{
                        display: flex;
                        align-items: center;
                        background: #efefef;
                        padding: .08rem .28rem;
                        img {
                            width: .28rem;
                            height: .28rem;
                            margin-right: .34rem;
                        }
                        p{
                            font-size: .24rem;
                            color: #f64406;
                        }
                    }
                    button {
                        border: none;
                        border-radius: .05rem;
                        width: 6.9rem;
                        height: .72rem;
                        position: fixed;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: .1rem;
                        background: #ff9d3c;
                        font-size: .3rem;
                        color: #fff;
                    }
                }
            }
        }
    .selIndex2{
        .accounts {
            .content1 {
                background: #fff;
                text-align: left;
                .data_list {
                    margin-top: .18rem;
                    padding: .26rem;
                    border-bottom: 1px solid #f0f0f1;
                    .names {
                        display: flex;
                        justify-content: space-between;
                        p {
                            font-size: .32rem;
                            color: #1f1f1f;
                        }
                    }
                    h6 {
                        font-size: .22rem;
                        color: #0a0a0a;
                        font-weight: 400;
                        margin: .18rem 0 .2rem 0;
                    }
                    .name1 {
                        display: flex;
                        p {
                            font-size: .26rem;
                            color: #545454;
                            margin-top: .14rem;
                        }
                        p:nth-of-type(1) {
                            width: 1.6rem;                  
                        }
                    }
                }
                button{
                    border: none;
                    border-radius: .05rem;
                    position: fixed;
                    bottom: .1rem;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 6.9rem;
                    height: .72rem;
                    line-height: .72rem;
                    text-align: center;
                    background: #ff9d3c;
                    font-size: .32rem;
                    color: #fff;
                }
            }
            .content2 {
                .no_data {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: #A9A9A9;
                }
            }               
        }
    }
    .selIndex3{
        .stores {
            .content {
                text-align: left;           
                >h6{
                    font-size: .24rem;
                    color: #535353;
                    font-weight: 400;
                    background: #ccc;
                    padding: .1rem .26rem;
                }
                .data_lists{
                    display: flex;
                    align-items: center;
                    padding: .24rem .28rem;
                    background: #fff;
                    .store_info{
                        margin-left: .28rem;
                        h6{
                            font-size: .28rem;
                            color: #484848;
                            font-weight: 400;
                            margin-bottom: .2rem;
                        }
                        p{
                            font-size: .27rem;
                            color: #898989;
                        }
                    }
                }
                .no_more{
                    text-align: center;
                    font-size: .22rem;
                    color: #919191;
                    padding: .22rem 0;
                }
                button{
                    border: none;
                    border-radius: .05rem;
                    position: fixed;
                    bottom: .1rem;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 6.9rem;
                    height: .72rem;
                    line-height: .72rem;
                    text-align: center;
                    background: #ff9d3c;
                    font-size: .32rem;
                    color: #fff;
                }
            }
        }
    }
	}
</style>
